<template>
	<view class="loginBox">
		<view class="login_form">
			<view class="login_form_title">你好, 朋友</view>
			<u-field placeholder-style="font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;" class='input_style' :border-bottom="false" v-model="account" label=""
				label-width='0' placeholder="请输入手机号">
			</u-field>
			
			<view class="smsBox">
				<u-field placeholder-style="font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;" class='input_style sms_input' :border-bottom="false" v-model="smsCode" label=""
								label-width='0' placeholder="请输入验证码"></u-field>
				<view v-if="smsStatus == 'get'" class="sms_style sms_get">获取验证码</view>
				<view v-if="smsStatus == 'success'" class="sms_style sms_success">发送成功</view>
				<view v-if="smsStatus == 'loading'" class="sms_style sms_countdown">60秒后重新获取</view>
			</view>

			<u-field placeholder-style="font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;" class='input_style' :type="isShow ? 'password' : 'text'" :border-bottom="false"
				v-model="psd" label="" label-width='0' placeholder="请输入密码">
				<template #right>
					<view class="" @click="changeShow">
						<u-icon v-if="isShow" name="eye-fill" :size="40"></u-icon>
						<u-icon v-else name="eye-off" :size="40"></u-icon>
					</view>
				</template>
			</u-field>

			<view class="login_form_btn">
				<view class="login_form_btn_real">注册</view>
				<view class="login_form_btn_shadow"></view>
			</view>
			<view class="login_form_tool">
				<view class="tool_register">
					<u-checkbox size="30" shape="circle" active-color="#509a80" @change="checkboxChange" v-model="isAllow" name="user">
						<view class="check_text">
							我同意《<text class="user_prity">用户使用协议</text>》
						</view>
					</u-checkbox>
				</view>
				<view class="tool_reset" @click="toLogin">返回登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				psd: '',
				isShow: false,
				isAllow: false,
				smsStatus: 'get', // get success loading
				smsCode: ''
			}
		},
		methods: {
			loginCallback() {
				const app = getApp()
				app.token = 'response.accessToken';
				app.isLogin = "isLogin"
				wx.setStorageSync('token', 'response.accessToken')
			},
			checkboxChange() {},
			changeShow() {
				this.isShow = !this.isShow
			},
			toRegist() {
				uni.navigateTo({
					url: '/pages/regist/regist'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.loginBox {
		width: 100%;
		height: 100%;
		background: url(../../static/login_bg@2x.png);
		background-size: 100%;
		.smsBox {
			width: 702rpx;
			// background: gold;
			margin-bottom: 40rpx;
			display: flex;
			.sms_style {
				flex-shrink: 0;
				width: 240rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 128rpx 128rpx 128rpx 128rpx;
				border: 2rpx solid #509A80;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #509A80;
			}
			.sms_input {
				margin-bottom: 0 !important;
				margin-right: 38rpx;
			}
		}
		
		

		.login_form {
			width: 100%;
			padding-top: 585rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.login_form_title {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				padding-bottom: 80rpx;
			}

			.input_style {
				width: 702rpx;
				height: 80rpx;
				background: #F5F5F5;
				border-radius: 128rpx 128rpx 128rpx 128rpx;
				// padding-bottom: 10rpx;
				border-bottom: none;
				margin-bottom: 40rpx;
			}

			.login_form_btn {
				width: 702rpx;

				position: relative;

				.login_form_btn_real {

					position: relative;
					z-index: 10;
					width: 100%;
					height: 80rpx;
					background: #509A80;
					box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
					border-radius: 128rpx 128rpx 128rpx 128rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.login_form_btn_shadow {
					width: 702rpx;
					height: 80rpx;
					background: url(../../static/btn_shadow@2x.png);
					background-size: 100% 100%;
					position: absolute;
					top: 40rpx;
					left: 0;
					// right: 0;
					// margin: auto;
					// z-index: 100;
				}
			}

			.login_form_tool {
				width: 702rpx;
				display: flex;
				justify-content: space-between;
				padding-top: 70rpx;

				.tool_register {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #509A80;
				}
				.check_text {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
				
				.user_prity {
					color: #75A2F3;
				}

				.tool_reset {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #509A80;
				}
			}
		}
	}
</style>